<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2022001在中国</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入ECharts库用于绘制地图 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script>
        // Tailwind 配置
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#F97316',
                        accent: '#10B981',
                        dark: '#1E293B',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .search-result-item {
                @apply p-3 border-b border-gray-200 hover:bg-blue-50 transition-colors duration-200 cursor-pointer;
            }
            .city-card {
                @apply bg-white rounded-lg shadow-md p-4 mb-4 transition-all duration-300 hover:shadow-lg;
            }
            .university-tag {
                @apply inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full mr-2 mb-2;
            }
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-800 min-h-screen flex flex-col">
    <!-- 页面头部 -->
    <header class="bg-gradient-to-r from-primary to-blue-700 text-white shadow-md">
        <div class="container mx-auto px-4 py-6">
            <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-center">2022001</h1>
            <p class="text-center mt-2 opacity-90">在中国</p>
            
            <!-- 搜索框 - 已添加文字颜色为黑色的样式 -->
            <div class="mt-6 max-w-2xl mx-auto relative">
                <input 
                    type="text" 
                    id="search-input" 
                    placeholder="搜索姓名、城市或大学..." 
                    class="w-full px-5 py-3 rounded-full shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 transition-all text-black"
                >
                <button id="search-button" class="absolute right-3 top-1/2 transform -translate-y-1/2 bg-secondary hover:bg-orange-500 text-white p-2 rounded-full transition-colors">
                    <i class="fa fa-search"></i>
                </button>
            </div>
            
            <!-- 搜索结果下拉框 -->
            <div id="search-results" class="hidden absolute left-0 right-0 mt-2 max-w-2xl mx-auto bg-white rounded-lg shadow-xl z-50 max-h-80 overflow-y-auto"></div>
        </div>
    </header>

    <!-- 主要内容区 -->
    <main class="flex-grow container mx-auto px-4 py-6 flex flex-col lg:flex-row gap-6">
        <!-- 地图区域 -->
        <div class="lg:w-2/3 bg-white rounded-xl shadow-md p-4 relative overflow-hidden">
            <h2 class="text-xl font-semibold mb-4 flex items-center">
                <i class="fa fa-map-marker text-red-500 mr-2"></i>中国大学分布地图
            </h2>
            <div class="aspect-[4/3] bg-blue-50 rounded-lg relative overflow-hidden" id="china-map-container" style="width:100%;height:500px;">
                <!-- 地图加载状态 -->
                <div id="map-loading" class="absolute inset-0 flex items-center justify-center bg-white/80 z-10">
                    <div class="text-center">
                        <div class="inline-block animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary mb-3"></div>
                        <p>加载地图中...</p>
                    </div>
                </div>
            </div>
            <div class="mt-4 text-sm text-gray-500 text-center">
                点击地图上的标记查看详情 | 可通过上方搜索框查找同学去向
            </div>
        </div>
        
        <!-- 信息面板 -->
        <div class="lg:w-1/3 flex flex-col gap-4">
            <!-- 统计卡片 -->
            <div class="bg-white rounded-xl shadow-md p-5">
                <h2 class="text-xl font-semibold mb-4 flex items-center">
                    <i class="fa fa-bar-chart text-accent mr-2"></i>统计信息
                </h2>
                <div class="grid grid-cols-2 gap-4 text-center">
                    <div class="bg-green-50 p-3 rounded-lg">
                        <p class="text-gray-500 text-sm">总人数</p>
                        <p id="total-students" class="text-2xl font-bold text-accent">0</p>
                    </div>
                    <div class="bg-blue-50 p-3 rounded-lg">
                        <p class="text-gray-500 text-sm">涉及城市</p>
                        <p id="total-cities" class="text-2xl font-bold text-primary">0</p>
                    </div>
                    <div class="bg-purple-50 p-3 rounded-lg">
                        <p class="text-gray-500 text-sm">涉及大学</p>
                        <p id="total-universities" class="text-2xl font-bold text-purple-600">0</p>
                    </div>
                    <div class="bg-orange-50 p-3 rounded-lg">
                        <p class="text-gray-500 text-sm">涉及省份</p>
                        <p id="total-provinces" class="text-2xl font-bold text-secondary">0</p>
                    </div>
                </div>
            </div>
            
            <!-- 热门城市 -->
            <div class="bg-white rounded-xl shadow-md p-5">
                <h2 class="text-xl font-semibold mb-4 flex items-center">
                    <i class="fa fa-fire text-red-500 mr-2"></i>热门城市
                </h2>
                <div id="popular-cities" class="space-y-2">
                    <!-- 热门城市将通过JS动态添加 -->
                </div>
            </div>
            
            <!-- 详情面板 -->
            <div class="bg-white rounded-xl shadow-md p-5">
                <h2 class="text-xl font-semibold mb-4 flex items-center">
                    <i class="fa fa-info-circle text-primary mr-2"></i>详情信息
                </h2>
                <div id="detail-panel" class="text-center text-gray-500 py-6">
                    <p>选择地图上的标记或使用搜索功能查看详情</p>
                    <i class="fa fa-map-o text-4xl mt-4 opacity-30"></i>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-6 mt-8">
        <div class="container mx-auto px-4 text-center">
            <p>我们的2022001 &copy; 2025</p>
            <p class="text-sm opacity-70 mt-2">Per aspera ad astra</p>
        </div>
    </footer>

    <script>
        // 同学数据
        const classmates = [
            { name: "陈思翰", city: "北京", province: "北京", university: "华北电力大学" },
            { name: "周远畅", city: "北京", province: "北京", university: "北京邮电大学" },
            { name: "张书瑞", city: "北京", province: "北京", university: "中国传媒大学" },
            { name: "胡晨", city: "武汉", province: "湖北", university: "武汉大学" },
            { name: "王宏瑞", city: "西安", province: "陕西", university: "西北工业大学" },
            { name: "倪奥", city: "成都", province: "四川", university: "电子科技大学" },
            { name: "高毅杨", city: "西安", province: "陕西", university: "西北工业大学" },
            { name: "侯宇杰", city: "成都", province: "四川", university: "电子科技大学" },
            { name: "王硕", city: "广州", province: "广东", university: "中山大学" },
            { name: "周旭尧", city: "济南", province: "山东", university: "山东大学" },
            { name: "李佳璇", city: "北京", province: "北京", university: "中国农业大学" },
            { name: "姜清源", city: "南京", province: "江苏", university: "东南大学" },
            { name: "陶语谦", city: "北京", province: "北京", university: "北京化工大学" },
            { name: "吴骏颢", city: "成都", province: "四川", university: "四川大学" },
            { name: "王礼强", city: "北京", province: "北京", university: "北京中医药大学" },
            { name: "张世勋", city: "合肥", province: "安徽", university: "安徽大学" },
            { name: "侯正昊", city: "广州", province: "广东", university: "中山大学" },
            { name: "陶友祺", city: "北京", province: "北京", university: "华北电力大学" },
            { name: "王康", city: "合肥", province: "安徽", university: "安徽公安学院" },
            { name: "王俊卿", city: "合肥", province: "安徽", university: "中国科学技术大学" },
            { name: "王业成", city: "常州", province: "江苏", university: "南京航空航天大学" },
            { name: "许展鹏", city: "合肥", province: "安徽", university: "中国科学技术大学" },
            { name: "葛艺萌", city: "南京", province: "江苏", university: "东南大学" },
            { name: "赵黎乐", city: "常州", province: "江苏", university: "南京航空航天大学" },
            { name: "韩传伟", city: "南京", province: "江苏", university: "南京师范大学" },
            { name: "杨硕", city: "上海", province: "上海", university: "上海外国语大学" },
            { name: "高一飞", city: "南京", province: "江苏", university: "南京航空航天大学" },
            { name: "赵润璟萱", city: "南京", province: "江苏", university: "河海大学" },
            { name: "叶芯蕊", city: "天津", province: "天津", university: "天津医科大学" },
            { name: "湛闿睿", city: "合肥", province: "安徽", university: "安徽大学" },
            { name: "陶一凡", city: "合肥", province: "安徽", university: "安徽医科大学" },
            { name: "徐誉祯", city: "南京", province: "江苏", university: "河海大学" },
            { name: "杜冠宏", city: "合肥", province: "安徽", university: "合肥工业大学" },
            { name: "胡志远", city: "武汉", province: "湖北", university: "武汉理工大学" },
            { name: "张泽中", city: "长沙", province: "湖南", university: "中南大学" },
            { name: "丁怡冉", city: "南京", province: "江苏", university: "南京农业大学" },
            { name: "纪乐天", city: "长沙", province: "湖南", university: "湖南大学" },
            { name: "方陈哲", city: "西安", province: "陕西", university: "西安邮电大学" },
            { name: "傅田甜", city: "吉林", province: "吉林", university: "东北电力大学" },
            { name: "张儒杰", city: "秦皇岛", province: "河北", university: "东北大学秦皇岛分校" },
            { name: "陈佳韫", city: "上海", province: "上海", university: "上海财经大学" },
            { name: "杨世润", city: "大连", province: "辽宁", university: "大连理工大学" },
            { name: "王英杰", city: "吉林", province: "吉林", university: "东北电力大学" },
            { name: "俞柯旺", city: "杭州", province: "浙江", university: "浙江工业大学" },
            { name: "李旭", city: "芜湖", province: "安徽", university: "安徽师范大学" },
            { name: "王沐阳", city: "南京", province: "江苏", university: "南京大学" },
            { name: "吴菁菁", city: "合肥", province: "安徽", university: "安徽医科大学" },
            { name: "方思远", city: "合肥", province: "安徽", university: "安徽医科大学" },
            { name: "董卓然", city: "大连", province: "辽宁", university: "大连海事大学" }
        ];

        // 城市坐标（基于ECharts的地理坐标系）
        const cityCoordinates = {
            "北京": [116.4074, 39.9042],
            "武汉": [114.3055, 30.5928],
            "西安": [108.954, 34.265],
            "成都": [104.0665, 30.5723],
            "广州": [113.2644, 23.1291],
            "济南": [117.0009, 36.6512],
            "南京": [118.7969, 32.0603],
            "合肥": [117.283, 31.8611],
            "常州": [119.9469, 31.7727],
            "上海": [121.4737, 31.2304],
            "天津": [117.2000, 39.1300],
            "长沙": [112.9822, 28.1944],
            "吉林": [126.5348, 43.8868],
            "秦皇岛": [119.5953, 39.9486],
            "大连": [121.6146, 38.9140],
            "杭州": [120.1551, 30.2741],
            "芜湖": [118.3891, 31.3387]
        };

        // DOM 元素
        const mapContainer = document.getElementById('china-map-container');
        const mapLoading = document.getElementById('map-loading');
        const searchInput = document.getElementById('search-input');
        const searchButton = document.getElementById('search-button');
        const searchResults = document.getElementById('search-results');
        const detailPanel = document.getElementById('detail-panel');
        const totalStudentsEl = document.getElementById('total-students');
        const totalCitiesEl = document.getElementById('total-cities');
        const totalUniversitiesEl = document.getElementById('total-universities');
        const totalProvincesEl = document.getElementById('total-provinces');
        const popularCitiesEl = document.getElementById('popular-cities');

        // ECharts实例
        let chart;

        // 初始化函数
        function init() {
            // 初始化地图
            initMap();
            
            // 计算并显示统计信息
            updateStatistics();
            
            // 显示热门城市
            displayPopularCities();
            
            // 绑定搜索事件
            bindSearchEvents();
        }

        // 初始化地图
        function initMap() {
            // 初始化ECharts实例
            chart = echarts.init(mapContainer);
            
            // 加载完整的中国地图数据
            fetch('https://cdn.jsdelivr.net/npm/echarts/map/json/china.json')
                .then(response => {
                    if (!response.ok) {
                        throw new Error('地图数据加载失败');
                    }
                    return response.json();
                })
                .then(chinaJson => {
                    // 注册地图
                    echarts.registerMap('china', chinaJson);
                    
                    // 隐藏加载状态
                    mapLoading.classList.add('hidden');
                    
                    // 按城市分组
                    const cityGroups = {};
                    classmates.forEach(classmate => {
                        if (!cityGroups[classmate.city]) {
                            cityGroups[classmate.city] = [];
                        }
                        cityGroups[classmate.city].push(classmate);
                    });
                    
                    // 准备地图数据
                    const geoCoordMap = cityCoordinates;
                    
                    // 转换为ECharts所需的数据格式
                    const convertData = function(data) {
                        return data.map(function(item) {
                            const geoCoord = geoCoordMap[item.name];
                            if (geoCoord) {
                                return {
                                    name: item.name,
                                    value: [...geoCoord, item.value],
                                    students: item.students
                                };
                            } else {
                                return null;
                            }
                        }).filter(item => item !== null);
                    };
                    
                    // 城市数据
                    const cityData = Object.keys(cityGroups).map(city => ({
                        name: city,
                        value: cityGroups[city].length,
                        students: cityGroups[city]
                    }));
                    
                    // 配置地图选项
                    const option = {
                        backgroundColor: '#E0F2FE',
                        tooltip: {
                            trigger: 'item',
                            formatter: function(params) {
                                if (params.data && params.data.students) {
                                    let content = `<div class="font-bold">${params.name}</div>`;
                                    
                                    // 按大学分组
                                    const universityGroups = {};
                                    params.data.students.forEach(student => {
                                        if (!universityGroups[student.university]) {
                                            universityGroups[student.university] = [];
                                        }
                                        universityGroups[student.university].push(student.name);
                                    });
                                    
                                    Object.keys(universityGroups).forEach(university => {
                                        content += `<div>${university}: ${universityGroups[university].join('、')}</div>`;
                                    });
                                    
                                    return content;
                                }
                                return params.name;
                            }
                        },
                        geo: {
                            map: 'china',
                            roam: true, // 允许缩放和平移
                            zoom: 1.2,
                            label: {
                                show: true,
                                fontSize: 10
                            },
                            itemStyle: {
                                areaColor: '#D1FAE5',
                                borderColor: '#3B82F6',
                                borderWidth: 1
                            },
                            emphasis: {
                                areaColor: '#9AE6B4',
                                label: {
                                    show: true,
                                    color: '#000',
                                    fontSize: 12
                                }
                            }
                        },
                        series: [
                            {
                                name: '同学数量',
                                type: 'scatter',
                                coordinateSystem: 'geo',
                                data: convertData(cityData),
                                symbolSize: function(val) {
                                    // 根据人数调整标记大小
                                    return Math.max(10, val[2] * 3);
                                },
                                itemStyle: {
                                    color: '#F97316',
                                    shadowBlur: 10,
                                    shadowColor: 'rgba(249, 115, 22, 0.5)'
                                },
                                emphasis: {
                                    itemStyle: {
                                        color: '#EF4444',
                                        shadowBlur: 15,
                                        shadowColor: 'rgba(239, 68, 68, 0.7)'
                                    }
                                }
                            }
                        ]
                    };
                    
                    // 设置地图选项
                    chart.setOption(option);
                    
                    // 地图点击事件
                    chart.on('click', function(params) {
                        if (params.data && params.data.students) {
                            showCityDetails(params.name, params.data.students);
                        }
                    });
                    
                    // 窗口大小变化时调整地图大小
                    window.addEventListener('resize', function() {
                        chart.resize();
                    });
                })
                .catch(error => {
                    console.error('地图初始化错误:', error);
                    mapLoading.innerHTML = `
                        <div class="text-center">
                            <i class="fa fa-exclamation-triangle text-red-500 text-2xl mb-2"></i>
                            <p>地图加载失败，请刷新页面重试</p>
                        </div>
                    `;
                });
        }

        // 显示城市详情
        function showCityDetails(city, students) {
            // 按大学分组
            const universityGroups = {};
            students.forEach(student => {
                if (!universityGroups[student.university]) {
                    universityGroups[student.university] = [];
                }
                universityGroups[student.university].push(student.name);
            });
            
            // 构建详情HTML
            let html = `
                <h3 class="text-xl font-bold text-primary mb-3">${city}</h3>
                <p class="text-gray-600 mb-4">共有 ${students.length} 名同学前往该城市</p>
            `;
            
            // 添加大学和同学列表
            Object.keys(universityGroups).forEach(university => {
                html += `
                    <div class="mb-4 p-3 bg-blue-50 rounded-lg">
                        <h4 class="font-semibold text-blue-800">${university}</h4>
                        <p class="mt-1 text-gray-700">
                            ${universityGroups[university].join('、')}
                        </p>
                    </div>
                `;
            });
            
            detailPanel.innerHTML = html;
            
            // 在移动设备上，点击后滚动到详情面板
            if (window.innerWidth < 1024) {
                detailPanel.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }
        }

        // 更新统计信息
        function updateStatistics() {
            // 总人数
            totalStudentsEl.textContent = classmates.length;
            
            // 总城市数
            const cities = new Set(classmates.map(c => c.city));
            totalCitiesEl.textContent = cities.size;
            
            // 总大学数
            const universities = new Set(classmates.map(c => c.university));
            totalUniversitiesEl.textContent = universities.size;
            
            // 总省份数
            const provinces = new Set(classmates.map(c => c.province));
            totalProvincesEl.textContent = provinces.size;
        }

        // 显示热门城市
        function displayPopularCities() {
            // 统计每个城市的人数
            const cityCounts = {};
            classmates.forEach(classmate => {
                cityCounts[classmate.city] = (cityCounts[classmate.city] || 0) + 1;
            });
            
            // 按人数排序并取前5
            const sortedCities = Object.entries(cityCounts)
                .sort((a, b) => b[1] - a[1])
                .slice(0, 5);
            
            // 生成热门城市HTML
            let html = '';
            sortedCities.forEach(([city, count], index) => {
                const colors = ['text-red-500', 'text-orange-500', 'text-yellow-500', 'text-green-500', 'text-blue-500'];
                
                html += `
                    <div class="flex items-center justify-between p-2 hover:bg-gray-50 rounded-lg cursor-pointer transition-colors"
                         onclick="showCityDetails('${city}', classmates.filter(c => c.city === '${city}'))">
                        <div class="flex items-center">
                            <span class="w-6 h-6 rounded-full bg-gray-100 flex items-center justify-center mr-2 ${colors[index]}">
                                ${index + 1}
                            </span>
                            <span>${city}</span>
                        </div>
                        <span class="bg-gray-100 px-2 py-1 rounded-full text-sm">${count}人</span>
                    </div>
                `;
            });
            
            popularCitiesEl.innerHTML = html;
        }

        // 绑定搜索事件
        function bindSearchEvents() {
            // 搜索按钮点击
            searchButton.addEventListener('click', performSearch);
            
            // 输入框回车
            searchInput.addEventListener('keypress', (e) => {
                if (e.key === 'Enter') {
                    performSearch();
                }
            });
            
            // 输入框输入时实时搜索
            searchInput.addEventListener('input', debounce(performSearch, 300));
            
            // 点击页面其他地方关闭搜索结果
            document.addEventListener('click', (e) => {
                if (!searchInput.contains(e.target) && !searchResults.contains(e.target)) {
                    searchResults.classList.add('hidden');
                }
            });
        }

        // 执行搜索
        function performSearch() {
            const query = searchInput.value.trim().toLowerCase();
            
            if (query === '') {
                searchResults.classList.add('hidden');
                return;
            }
            
            // 搜索匹配项
            const results = classmates.filter(classmate => 
                classmate.name.toLowerCase().includes(query) ||
                classmate.city.toLowerCase().includes(query) ||
                classmate.province.toLowerCase().includes(query) ||
                classmate.university.toLowerCase().includes(query)
            );
            
            // 显示搜索结果
            displaySearchResults(results);
        }

        // 显示搜索结果
        function displaySearchResults(results) {
            if (results.length === 0) {
                searchResults.innerHTML = '<div class="p-3 text-center text-gray-500">没有找到匹配的结果</div>';
                searchResults.classList.remove('hidden');
                return;
            }
            
            let html = '';
            results.forEach(classmate => {
                html += `
                    <div class="search-result-item" onclick="showSearchResultDetails('${classmate.name}')">
                        <div class="font-medium">${classmate.name}</div>
                        <div class="text-sm text-gray-600">${classmate.university} - ${classmate.city}(${classmate.province})</div>
                    </div>
                `;
            });
            
            searchResults.innerHTML = html;
            searchResults.classList.remove('hidden');
        }

        // 显示搜索结果详情
        function showSearchResultDetails(name) {
            const classmate = classmates.find(c => c.name === name);
            if (classmate) {
                // 隐藏搜索结果
                searchResults.classList.add('hidden');
                
                // 显示同学详情
                detailPanel.innerHTML = `
                    <div class="text-center mb-4">
                        <div class="inline-block bg-primary/10 text-primary p-3 rounded-full mb-3">
                            <i class="fa fa-user text-2xl"></i>
                        </div>
                        <h3 class="text-2xl font-bold">${classmate.name}</h3>
                    </div>
                    <div class="space-y-3">
                        <div class="flex items-start">
                            <i class="fa fa-university text-gray-400 mt-1 w-5"></i>
                            <div>
                                <div class="text-sm text-gray-500">大学</div>
                                <div class="font-medium">${classmate.university}</div>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <i class="fa fa-map-marker text-gray-400 mt-1 w-5"></i>
                            <div>
                                <div class="text-sm text-gray-500">城市/省份</div>
                                <div class="font-medium">${classmate.city} (${classmate.province})</div>
                            </div>
                        </div>
                    </div>
                `;
                
                // 在地图上定位该城市
                const coords = cityCoordinates[classmate.city];
                if (coords && chart) {
                    // 地图居中到该城市
                    chart.setOption({
                        geo: {
                            center: coords,
                            zoom: 5
                        }
                    });
                    
                    // 高亮显示该城市
                    chart.dispatchAction({
                        type: 'highlight',
                        name: classmate.city
                    });
                    
                    // 3秒后取消高亮
                    setTimeout(() => {
                        chart.dispatchAction({
                            type: 'downplay',
                            name: classmate.city
                        });
                    }, 3000);
                    
                    // 滚动到地图（在移动设备上）
                    if (window.innerWidth < 1024) {
                        mapContainer.scrollIntoView({ behavior: 'smooth' });
                    }
                }
            }
        }

        // 防抖函数
        function debounce(func, delay) {
            let timeout;
            return function(...args) {
                clearTimeout(timeout);
                timeout = setTimeout(() => func.apply(this, args), delay);
            };
        }

        // 全局函数，供HTML中调用
        window.showCityDetails = showCityDetails;
        window.showSearchResultDetails = showSearchResultDetails;
        window.classmates = classmates;

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', init);
    </script>
</body>
</html>
    